<template>
    <van-popup :show="props.modelValue" round position="bottom" @click-overlay="onClickOverlay" closeable
        :style="{ height: '510px' }" @click-close-icon="onClickOverlay">
        <div class="pop_conent">
            <div class="pop_title">{{ props.title }}</div>
            <!-- 基础信息 -->
            <div class="pop_xhibit" v-if="props.type == 0">
                <div class="pop_xhibit_item">
                    <div class="pop_label">供应商名：</div>
                    <div class="pop_valuex">
                        <div class="pop_valuex_name">{{ data.supplierName }}</div>
                        <div class="pop_valuex_icon" v-if="data?.bigBrandStatus == 1">免签</div>
                    </div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">69码：</div>
                    <div class="pop_value">{{ data.styleCode }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">类目：</div>
                    <div class="pop_value">{{ data.productCategoryName }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">品牌：</div>
                    <div class="pop_value">{{ data.brandName }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">对接群：</div>
                    <div class="pop_value">{{ data.groupName }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">规格/材质：</div>
                    <div class="pop_value">{{ data.specs }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">上架时间：</div>
                    <div class="pop_value">{{ data.shoppingTime }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">贸易方式：</div>
                    <div class="pop_value">{{ data.tradeMode }}</div>
                </div>
                <div class="pop_xhibit_item" v-if="data.productCategoryName.indexOf('饰品') >= 0">
                    <div class="pop_label">是否走仓：</div>
                    <div class="pop_value">{{ data.warehouse ? '是' : '否' }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">历史最低售价：</div>
                    <div class="pop_value">{{ data.historyPrice }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">卖点：</div>
                    <div class="pop_value">{{ data.sellingPoints }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">直播类型：</div>
                    <div class="pop_value">{{ data.liveType }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">库存编码：</div>
                    <div class="pop_value">{{ data.stockCode }}</div>
                </div>
            </div>
            <!-- 直播补充信息 -->
            <div class="pop_xhibit" v-if="props.type == 1">
                <div class="pop_xhibit_item">
                    <div class="pop_label">发货时间：</div>
                    <div class="pop_value">{{ data.deliveryTime }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">发货地：</div>
                    <div class="pop_value">{{ data.placeDelivery }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">物流/快递：</div>
                    <div class="pop_value">{{ data.logistics }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">适用人群：</div>
                    <div class="pop_value">{{ data.eligibility }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">厂家可用库存：</div>
                    <div class="pop_value">{{ data.factoryStockNum }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">不发货地区：</div>
                    <div class="pop_value">{{ data.noSendArea }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">大货时间：</div>
                    <div class="pop_value">{{ data.bigDate }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">包销时限：</div>
                    <div class="pop_value">{{ data.packageDeadline }}</div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">无A货截图</div>
                    <div class="pop_value pop_wrap pop_image">
                        <div class="mul_imags" v-if="data.noAbImages">
                            <van-image v-for="(item, index) in data.noAbImages"
                                :src="item + '?x-oss-process=image/resize,w_300'" :key="index"
                                @click="enlargeImage(item)">
                                <template v-slot:error>加载失败</template>
                            </van-image>
                        </div>
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">大货视频</div>
                    <div class="pop_value pop_wrap pop_image">
                        <div class="mul_imags" v-if="data.bigVideos">
                            <VideoDisplay :src="data.bigVideos" width="90" height="90" />
                        </div>
                        <div v-else>无</div>
                    </div>
                </div>
            </div>
            <!-- 供应商信息 -->
            <div class="pop_xhibit" v-if="props.type == 2">
                <div class="pop_xhibit_item">
                    <div class="pop_label">商家类型：</div>
                    <div class="pop_value">{{ data.supplierType }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">厂家地址：</div>
                    <div class="pop_value">{{ data.addr }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">联系人：</div>
                    <div class="pop_value">{{ data.contactName }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">联系电话：</div>
                    <div class="pop_value">{{ data.phone }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">详细地址：</div>
                    <div class="pop_values">{{ data.address }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">合同状态：</div>
                    <div class="pop_values pop_value_contract">
                        <div :class="data.sellStatus == '1' ? 'selecteds' : 'noselecteds'">供销合同</div>
                        <div :class="[data.packageStatus == '1' ? 'selecteds' : 'noselecteds', 'marginselect']">包销合同
                        </div>
                        <div :class="[data.depositStatus == '1' ? 'selecteds' : 'noselecteds', 'marginselect']">保证金协议
                        </div>
                        <div :class="[data.supplementStatus == '1' ? 'selecteds' : 'noselecteds', 'marginTopselect']">
                            补充协议</div>
                    </div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">信誉状况：</div>
                    <div class="pop_values pop_value_contract">
                        <div :class="data.bigOverCount == '0' ? 'selecteds' : 'noselecteds'">
                            {{ data.bigOverCount == '0' ? '大货无超期' : '大货有超期' }}
                        </div>
                    </div>
                </div>
            </div>
            <!-- 商品资质 -->
            <div class="pop_xhibit" v-if="props.type == 3">
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">商品实拍</div>
                    <div class="pop_value pop_wrap pop_image">
                        <div class="mul_imags" v-if="data.productImages">
                            <van-image v-for="(item, index) in data.productImages"
                                :src="item + '?x-oss-process=image/resize,w_300'" :key="index"
                                @click="enlargeImage(item)">
                                <template v-slot:error>加载失败</template>
                            </van-image>
                        </div>
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">备案行政/许可证批件</div>
                    <div class="pop_value pop_wrap pop_image">
                        <div class="mul_imags" v-if="data.voucherImages">
                            <div v-for="(item, index) in data.voucherImages" :key="index">
                                <IsImgPdf :url="item" />
                            </div>
                        </div>
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">其他资质</div>
                    <div class="pop_value pop_wrap pop_image">
                        <div class="mul_imags" v-if="data.otherImages">
                            <div v-for="(item, index) in data.otherImages" :key="index">
                                <IsImgPdf :url="item" />
                            </div>
                        </div>
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">营业执照</div>
                    <div class="pop_value pop_wrap pop_image">
                        <van-image v-if="data.businessImage"
                            :src="data?.businessImage + '?x-oss-process=image/resize,w_300'"
                            @click="enlargeImage(data.businessImage)"><template v-slot:error>加载失败</template></van-image>
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">进口货物/原材料报关单</div>
                    <div class="pop_value pop_wrap pop_image">
                        <div class="mul_imags" v-if="data.customsDeclarationImages">
                            <div v-for="(item, index) in data.customsDeclarationImages" :key="index">
                                <IsImgPdf :url="item" />
                            </div>
                        </div>
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">进口产品备案材料</div>
                    <div class="pop_value pop_wrap pop_image">
                        <div class="mul_imags" v-if="data.customsInformationImages">
                            <div v-for="(item, index) in data.customsInformationImages" :key="index">
                                <IsImgPdf :url="item" />
                            </div>
                        </div>
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">进口产品原材料检验检疫证明</div>
                    <div class="pop_value pop_wrap pop_image">
                        <div class="mul_imags" v-if="data.customsInspectionImages">
                            <div v-for="(item, index) in data.customsInspectionImages" :key="index">
                                <IsImgPdf :url="item" />
                            </div>
                        </div>
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">检测报告</div>
                    <div class="pop_value pop_wrap pop_image">
                        <div class="mul_imags" v-if="data.customsTestReportImgaes">
                            <div v-for="(item, index) in data.customsTestReportImgaes" :key="index">
                                <IsImgPdf :url="item" />
                            </div>
                        </div>
                        <div v-else>无</div>
                    </div>
                </div>
            </div>
            <div class="pop_button" @click="onClickOverlay">我知道了</div>
        </div>
    </van-popup>
</template>
<script setup lang="ts">
import { defineProps } from 'vue'
import IsImgPdf from '@/components/isImgPdf/index.vue'
import { showImagePreview } from 'vant';
import VideoDisplay from '@/components/videoDisplay/index.vue'

const props = defineProps({
    // 是否展示
    modelValue: { type: Boolean, default: false },
    // 展示类型
    type: { type: Number, default: 0 },
    // 展示内容
    data: { type: Object, default: () => { } },
    // 展示title
    title: { type: String, default: '' },
    // 高度
    height: { type: Number, default: 0 },
})
const emit = defineEmits(['update:modelValue'])
// 点击遮罩层时调用的方法
const onClickOverlay = () => {
    emit("update:modelValue", false);
};
/** 图片放大 */
const enlargeImage = (img: string) => {
    if (img) {
        showImagePreview({
            images: [img]
        })
    }
}
</script>
<style lang="less" scoped>
.pop_conent {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 15px;

    .pop_title {
        width: 100%;
        font-weight: 500;
        font-size: 16px;
        color: #1A1B1C;
        text-align: center;
        margin-bottom: 10px;
    }

    .pop_xhibit {
        width: 100%;
        height: calc(100% - 94px);
        overflow: auto;

        .pop_xhibit_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            min-height: 25px;
            flex-wrap: wrap;

            .pop_wrap {
                width: 100% !important;
            }

            .pop_valuex {
                width: calc(100% - 100px);
                display: flex;
                align-items: center;
                justify-content: space-between;

                .pop_valuex_name {
                    flex: 1;
                    min-height: 0;
                    word-break: break-all;
                    font-weight: 400;
                    font-size: 14px;
                    color: #8492AD;
                }

                .pop_valuex_icon {
                    height: 22px;
                    background: linear-gradient(136deg, #E9D1A5 0%, #CEA46C 100%);
                    border-radius: 5px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0 20px;
                    font-weight: 500;
                    font-size: 12px;
                    color: #1B1714;
                }

            }

            .pop_image {
                height: auto !important;
                line-height: normal !important;
                display: flex !important;

                .van-image {
                    width: 90px;
                    height: 90px;
                }

                video {
                    width: 90px;
                    height: 90px;
                }

                .mul_imags {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;

                    .van-image {
                        margin-right: 24px;
                        margin-bottom: 5px;
                    }
                }
            }

            .pop_label {
                width: 100px;
                min-height: 25px;
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;
                line-height: 25px;
            }

            .pop_value {
                width: calc(100% - 100px);
                line-height: 25px;
                font-weight: 400;
                font-size: 14px;
                color: #8492AD;
                word-break: break-all;
                // display: -webkit-box;
                // overflow: hidden;
                // text-overflow: ellipsis;
                // -webkit-line-clamp: 1;
                // -webkit-box-orient: vertical;
            }

            .pop_values {
                width: calc(100% - 100px);
                height: 25px;
                line-height: 25px;
                font-weight: 400;
                font-size: 14px;
                color: #8492AD;
                display: flex;
                align-items: center;


                .selecteds {
                    height: 22px;
                    background: #E7FDEE;
                    border-radius: 13px;
                    font-weight: 500;
                    font-size: 12px;
                    color: #19D11B;
                    text-align: center;
                    line-height: 22px;
                    box-sizing: border-box;
                    padding: 0 10px;
                }

                .noselecteds {
                    height: 22px;
                    background: #FDE7E7;
                    border-radius: 13px;
                    text-align: center;
                    line-height: 22px;
                    font-weight: 500;
                    font-size: 12px;
                    color: #FC2540;
                    box-sizing: border-box;
                    padding: 0 10px;
                }

                .marginselect {
                    margin-left: 5px;
                }

                .marginTopselect {
                    margin-top: 10px;
                }
            }

            .pop_value_contract {
                flex-wrap: wrap !important;
                height: auto !important;
            }
        }

        .pop_xhibit_items {
            height: auto !important;
        }


    }

    .pop_button {
        width: 345px;
        height: 44px;
        background: #0094FF;
        border-radius: 23px;
        text-align: center;
        line-height: 44px;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
        margin-top: 20px;
    }
}
</style>